<script>
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import First_popup from '@/pages/familyPage/components/first_popup.vue';
  import sheep from '@/sheep';
  import Second_popup from '@/pages/familyPage/components/second_popup.vue';

  export default {
    name: 'membersList',
    components: { Second_popup, First_popup, ImageAvater },
    data() {
      return {
        info: {},
        permissionsList: [
          {
            name: '联合发起人',
          },
          {
            name: '管理员',
          },
          {
            name: '仅查看',
          },
          {
            name: '移除人员',
          },
        ],
        selectIndex: 0,
        selectItem: {},
      };
    },
    props: {
      isSearch: {
        type: Boolean,
        default: false,
      },
      margin: {
        type: String,
        default: '0 0 0 0',
      },
      title: {
        type: String,
        default: '发起人',
      },
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
      permissionsIndex: {
        type: Number,
        default: 0,
      },
      // 当前选中者的信息
      ownDetail: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 家庭ID
      familyId: {
        type: [Number, String],
        default: '',
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    methods: {
      openPopup(index = 0, info = {}) {
        this.selectItem = info;
        switch (this.selectItem.role_id) {
          case 0:
            this.selectIndex = 3;
            this.classificationIsComplete(index, info);
            return;
          case 1:
            this.selectIndex = 0;
            this.classificationIsComplete(index, info);
            return;
          case 2:
            this.selectIndex = 1;
            this.classificationIsComplete(index, info);
            return;
          case 3:
            this.selectIndex = 2;
            this.classificationIsComplete(index, info);
            return;
        }
      },
      async classificationIsComplete(index, info) {
        console.log('选中的权限', index, info);
        if (index == 0) {
          this.$refs.secondPopup.openPopup({
            background: `${this.IMG_URL}/index/personalInformation.png`,
            memberInfo: info.full_list,
            isShowEdit: info.is_my != 1,
            selectInfo: info,
            uid: info.partner_id,
          });
        } else {
          this.$refs.firstPopup.openPopup({
            title: '权限管理',
            maskClick: false,
            popupBackground: true,
            showTitle: false,
            confirm: async () => {
              let type = 0;
              if (this.selectIndex == 0) {
                type = 1;
              } else if (this.selectIndex == 1) {
                type = 2;
              } else if (this.selectIndex == 2) {
                type = 3;
              } else if (this.selectIndex == 3) {
                type = 4;
              }
              let { status, msg } = await sheep.$api.family.updateFamilyMemberRole({
                family_id: this.familyId,
                member_id: this.selectItem.member_id,
                role_id: type,
              });
              this.$emit('classificationIsComplete');
              this.$refs.firstPopup.closePopup();
            },
          });
        }
      },
      close() {
        this.$refs.secondPopup.closePopup();
      },
      // 跳转修改备注页面
      goEdit(info) {
        uni.setStorageSync('remarksInformation', JSON.stringify(info));
        this.$nav.navigateTo('/pages/familyPage/modifyNote/index');
      },
      seachClick() {
        this.$emit('seachClick');
      },
      openRelationshipPopUp(info) {
        this.$emit('openRelationshipPopUp', info);
      },
      setRemark(info) {
        this.$emit('openRelationshipPopUp', info);
      },
    },
  };
</script>

<template>
  <view class="membersList flex flex-column align-center" :style="{
    margin:margin
  }">
    <view class="membersList_content flex flex-column align-center">
      <view class="membersList_content_search flex align-center justify-center" v-if="isSearch"
            @click.stop="seachClick">
        <image class="membersList_content_search_image mr_8" src="/static/shiqin-images/search.png"></image>
        <text class="membersList_content_search_text">搜索</text>
      </view>
      <view class="membersList_content_title" :style="{
         margin : isSearch?'17rpx 0 0 20rpx':'0 0 0 20rpx'
      }">
        <text class="membersList_content_title_text">{{ title }}</text>
      </view>
      <view class="membersList_content_list flex align-center justify-between mt_28" v-for="(item,index) in list"
            :key="index">
        <view class="membersList_content_list_left flex align-center">
          <image-avater :width="100" :height="100" :src="item.avatar"></image-avater>
          <view class="membersList_content_list_left_info ml_23">
            <view class="familyManagement_right_info_name flex align-center">
              <text class="familyManagement_right_info_name_text">{{ item.username }}</text>
              <view class="familyManagement_right_info_name_remarks ml_5 flex align-center justify-center">
                <text class="familyManagement_right_info_name_remarks_text">{{ item.remark || '未设置' }}</text>
              </view>
              <image v-if="item.is_my != 1" class="familyManagement_right_info_image ml_10"
                     :src="`${IMG_URL}/index/editRemark.png`" @click.stop="openRelationshipPopUp(item)"></image>
            </view>
            <view class="familyManagement_right_info_code mt_10">
              <text class="familyManagement_right_info_code_text">拾亲号：{{ item.user_uid }}</text>
            </view>
          </view>
        </view>
        <view class="membersList_content_list_right flex align-center justify-between">
          <view class="membersList_content_list_right_view flex align-center justify-center mr_26"
                @click.stop="classificationIsComplete(0,item)">
            <text class="membersList_content_list_right_view_text">查看</text>
          </view>
          <view v-if="item.role_id > ownDetail.auth_role_id"
                class="membersList_content_list_right_permissions flex align-center justify-center"
                @click.stop="openPopup(1,item)">
            <text class="membersList_content_list_right_permissions_text">权限</text>
          </view>
        </view>
      </view>
    </view>

    <first_popup ref="firstPopup">
      <template #content>
        <view class="flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              权限管理
            </view>
          </view>
          <image class="familyMemberPopUp_icon z-1" :src="`${IMG_URL}passwoed_icon.png`"></image>
          <view class="first_popup z_1  flex align-center">
            <image-avater :width="78" :height="78" :src="selectItem.avatar"></image-avater>
            <view class="membersList_content_list_left_info ml_23">
              <view class="familyManagement_right_info_name flex align-center">
                <text class="familyManagement_right_info_name_text">{{ selectItem.username }}</text>
                <view class="familyManagement_right_info_name_remarks ml_5 flex align-center justify-center"
                      v-if="!!selectItem.remark">
                  <text class="familyManagement_right_info_name_remarks_text">{{ selectItem.remark }}</text>
                </view>
              </view>
              <view class="familyManagement_right_info_code mt_10">
                <text class="familyManagement_right_info_code_text">拾亲号：{{ selectItem.user_uid }}</text>
              </view>
            </view>
          </view>
          <view class="first_select z_1 flex align-center justify-between"
                :style="index == permissionsList.length - 1?'border:none;':''"
                v-for="(item,index) in permissionsList" :key="index" @click="selectIndex = index">
            <text class="first_select_title">{{ item.name }}</text>
            <view class="first_select_radio" v-if="selectIndex == index">
            </view>
            <view class="first_select_border" v-else>
            </view>
          </view>
        </view>
      </template>
    </first_popup>

    <second_popup ref="secondPopup" @goEdit="setRemark"></second_popup>
  </view>
</template>

<style scoped lang="scss">
  .membersList {
    width: 702rpx;
    padding: 17rpx 0;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;

    .membersList_content {
      .membersList_content_search {
        width: 662rpx;
        height: 80rpx;
        background: #F5F5F5;
        border-radius: 21rpx;

        &_image {
          width: 25rpx;
          height: 25rpx;
        }

        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #B2B2B2;
        }
      }

      .membersList_content_title {
        width: 662rpx;

        .membersList_content_title_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #4B4B4B;
        }
      }

      .membersList_content_list {
        width: 662rpx;

        .membersList_content_list_left {
          .membersList_content_list_left_info {
            .familyManagement_right_info_name {
              &_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 36rpx;
                color: #292929;
              }

              .familyManagement_right_info_name_remarks {
                height: 30rpx;
                padding: 0 17rpx;
                background: #FF7950;
                border-radius: 15rpx 15rpx 15rpx 15rpx;

                &_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 26rpx;
                  color: #FFFFFF;
                }
              }

              .familyManagement_right_info_image {
                width: 30rpx;
                height: 30rpx;
              }
            }

            .familyManagement_right_info_code {
              &_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #4B4B4B;
              }
            }


          }
        }

        .membersList_content_list_right {
          .membersList_content_list_right_view {
            width: 98rpx;
            height: 38rpx;
            background: #4887FF;
            border-radius: 57rpx 57rpx 57rpx 57rpx;

            .membersList_content_list_right_view_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }

          .membersList_content_list_right_permissions {
            width: 98rpx;
            height: 38rpx;
            background: #FF4206;
            border-radius: 57rpx 57rpx 57rpx 57rpx;

            .membersList_content_list_right_permissions_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }
        }
      }
    }

    .first_popup {
      width: 555rpx;
      border-bottom: 1rpx solid #EBEBEB;
      padding: 32rpx 27rpx 20rpx 27rpx;

      .membersList_content_list_left_info {
        .familyManagement_right_info_name {
          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 36rpx;
            color: #292929;
          }

          .familyManagement_right_info_name_remarks {
            height: 30rpx;
            padding: 0 17rpx;
            background: #FF7950;
            border-radius: 15rpx 15rpx 15rpx 15rpx;

            &_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 26rpx;
              color: #FFFFFF;
            }
          }

          &_image {
            width: 30rpx;
          }
        }

        .familyManagement_right_info_code {
          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #4B4B4B;
          }
        }
      }
    }

    .first_select {
      width: 516rpx;
      border-bottom: 1rpx solid #E8E8E8;
      padding: 32rpx 5rpx 18rpx 5rpx;

      .first_select_title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #4B4B4B;
      }

      .first_select_radio {
        width: 26rpx;
        height: 26rpx;
        border-radius: 50%;
        border: 6rpx solid #FF4206;
      }

      .first_select_border {
        width: 26rpx;
        height: 26rpx;
        border-radius: 50%;
        border: 2rpx solid #707070;
      }
    }

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
</style>